<template>
	<view class="donate-main">
		<view class="danate-top">
			<view class="top-title">
				<text>7.20郑州特大暴雨紧急捐赠活动</text>
				<button :plain="true">活动详情</button>
			</view>
			<view class="top-process">
				<view class="process-line"></view>
				<view class="process-node">
					<view style="width: 33%;">
						<image mode="widthFix" src="../../static/donate/img_donate_first_node.png"></image>
						<text>提交申请</text>
					</view>
					<!-- <view style="width: 24%;">
						<image mode="widthFix" src="../../static/donate/img_donate_second_node.png"></image>
						<text>系统审核</text>
					</view> -->
					<view style="width: 33%;">
						<image mode="widthFix" src="../../static/donate/img_donate_third_node.png"></image>
						<text>邮寄/送货/上门</text>
					</view>
					<view style="width: 33%;">
						<image mode="widthFix" src="../../static/donate/img_donate_fourth_node.png"></image>
						<text>确认完成</text>
					</view>
				</view>
			</view>
		</view>

		<view class="photo-upload">
			<view class="info-title">
				<view></view>
				<text>相关证明图片（非必填）</text>
				<span>{{ imgUrls.length }}/6</span>
			</view>
			<view class="img-axplain"><text>包括实物照片、质量合格证书、价值凭证等</text></view>

			<view class="upload-img">
				<view class="uploaded-img" v-for="(item, index) in imgUrls" :key="index" :style="{ 'margin-right': index % 3 == 2 ? '0rpx' : '40rpx' }">
					<view class="del-img" @click="deleteImg(index)"><u-icon name="close" size="2" color="#ffffff"></u-icon></view>
					<image :src="item"></image>
				</view>
				<view class="slot-btn" @click="upload()" :style="{ 'margin-right': imgUrls.length % 3 == 0 ? '30rpx' : '0rpx' }">
					<image mode="widthFix" src="../../static/donate/img_donate_imgupload.png"></image>
					<text>添加图片</text>
				</view>
			</view>
		</view>

		<!-- <view class="photo-upload">
			<view class="info-title">
				<view></view>
				<text>质量合格证书（必填）</text>
				<span>{{ imgUrls2.length }}/3</span>
			</view>

			<view class="upload-img">
				<view class="uploaded-img" v-for="(item, index) in imgUrls2" :key="index" :style="{ 'margin-right': index % 3 == 2 ? '0rpx' : '40rpx' }">
					<view class="del-img" @click="deleteImg(2, index)"><u-icon name="close" size="2" color="#ffffff"></u-icon></view>
					<image :src="item"></image>
				</view>
				<view class="slot-btn" @click="upload(2)" :style="{ 'margin-right': imgUrls2.length % 3 == 0 ? '30rpx' : '0rpx' }">
					<image mode="widthFix" src="../../static/donate/img_donate_imgupload.png"></image>
					<text>添加图片</text>
				</view>
			</view>
		</view>

		<view class="photo-upload">
			<view class="info-title">
				<view></view>
				<text>价值凭证</text>
				<span>{{ imgUrls3.length }}/3</span>
			</view>

			<view class="upload-img">
				<view class="uploaded-img" v-for="(item, index) in imgUrls3" :key="index" :style="{ 'margin-right': index % 3 == 2 ? '0rpx' : '40rpx' }">
					<view class="del-img" @click="deleteImg(3, index)"><u-icon name="close" size="2" color="#ffffff"></u-icon></view>
					<image :src="item"></image>
				</view>
				<view class="slot-btn" @click="upload(3)" :style="{ 'margin-right': imgUrls3.length % 3 == 0 ? '30rpx' : '0rpx' }">
					<image mode="widthFix" src="../../static/donate/img_donate_imgupload.png"></image>
					<text>添加图片</text>
				</view>
			</view>
		</view> -->

		<!-- 底部按钮 -->
		<view class="btn-box">
			<button class="save-btn">暂存资料</button>
			<button class="next-btn" @click="$gopage('/pages/donate/finishDonate')">提交</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgUrls: []
			// imgUrls2: [],
			// imgUrls3: []
		};
	},
	methods: {
		// 删除图片
		deleteImg(index) {
			uni.showModal({
				title: '删除图片',
				content: '确定删除图片?',
				success: res => {
					if (res.confirm) {
						// if (indexCount == 1) {
						// 	this.imgUrls.splice(index, 1);
						// } else if (indexCount == 2) {
						// 	this.imgUrls2.splice(index, 1);
						// } else if (indexCount == 3) {
						// 	this.imgUrls3.splice(index, 1);
						// }
						this.imgUrls.splice(index, 1);
					}
				}
			});
		},
		upload() {
			let length;
			// if (indexCount == 1) {
			// 	length = this.imgUrls.length
			// } else if (indexCount == 2) {
			// 	length = this.imgUrls2.length
			// } else if (indexCount == 3) {
			// 	length = this.imgUrls3.length
			// }
			length = this.imgUrls.length;

			if (6 - length <= 0) {
				uni.showToast({
					title: '最多上传3张',
					icon: 'none'
				});
				return false;
			}

			uni.chooseImage({
				// 设置不超过3张图片
				count: 6 - length,
				success: res => {
					let tempFiles = res.tempFiles;
					res.tempFilePaths.forEach((item, index) => {
						if (parseInt(tempFiles[index].size / 1024) > 10240) {
							uni.showToast({
								title: '大小限制10M',
								icon: 'none'
							});
							return false;
						}
						this.imgUrls.push(item);
						// if (indexCount == 1) {
						// 	this.imgUrls.push(item);
						// } else if (indexCount == 2) {
						// 	this.imgUrls2.push(item);
						// } else if (indexCount == 3) {
						// 	this.imgUrls3.push(item);
						// }
						// 				uni.uploadImage({
						// 					url: this.$basePath + '/api/fileUpLoad?dir=itemfile',
						// 					filePath: item,
						// 					success: uploadFileRes => {

						// 						if (JSON.parse(uploadFileRes.data).code == 200) {

						// 						} else {
						// 							uni.showToast({
						// 								title: JSON.parse(uploadFileRes
						// 									.data).msg,
						// 								icon: 'none'
						// 							});
						// 						}
						// 					},
						// 					fail: failContent => {
						// 						uni.showToast({
						// 							title: JSON.parse(uploadFileRes.data).msg,
						// 							icon: 'none'
						// 						});
						// 					}
						// 				});
					});
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.donate-main {
	padding-bottom: 50rpx;
}
// 标题样式
.info-title {
	display: flex;
	align-items: center;
	margin-bottom: 17rpx;
	view {
		width: 10rpx;
		height: 30rpx;
		margin-right: 20rpx;
		background-color: #fe5745;
	}
	text {
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
		flex: 1;
	}
	span {
		font-size: 30rpx;
		color: #666666;
	}
}

.danate-top {
	padding: 40rpx 30rpx 68rpx 30rpx;
	margin-bottom: 80rpx;
	background-image: url(../../static/donate/img_donate_top_bg.png);
	background-size: 100% 100%;
	.top-title {
		display: flex;
		align-items: center;
		margin-bottom: 59rpx;
		text {
			font-size: 34rpx;
			color: #ffffff;
			flex: 1;
			font-weight: bold;
		}
		button {
			border-radius: 10rpx;
			border: solid 2rpx #ffffff;
			font-size: 26rpx;
			color: #ffffff;
		}
	}
	.top-process {
		.process-line {
			height: 16rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
			opacity: 0.6;
		}
		.process-node {
			display: flex;
			view {
				position: relative;
				top: -40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: rgba(255, 255, 255, 0.7);
				font-size: 26rpx;
				image {
					width: 64rpx;
					margin-bottom: 16rpx;
				}
			}
		}
	}
}

.photo-upload {
	padding: 0rpx 40rpx;
	.img-axplain {
		color: #999999;
		font-size: 26rpx;
		margin-bottom: 40rpx;
		margin-left: 29rpx;
	}
	.upload-img {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.uploaded-img {
			width: calc(33% - 30rpx);
			height: 160rpx;
			border-radius: 6rpx;
			margin-bottom: 30rpx;
			position: relative;
			.del-img {
				background-color: #fe5745;
				width: 30rpx;
				height: 30rpx;
				padding: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				position: absolute;
				z-index: 1;
				top: -20rpx;
				left: calc(100% - 20rpx);
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 6rpx;
			}
		}
		.slot-btn {
			width: calc(33% - 40rpx);
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 6rpx;
			border: 4rpx dashed #999999;
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 30rpx;
			image {
				width: 56rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}

.btn-box {
	display: flex;
	height: 70rpx;
	margin-top: 174rpx;
	.save-btn {
		width: 280rpx;
		border-radius: 10rpx;
		border: solid 2rpx #fe5745;
		color: #333333;
		background-color: white;
		font-size: 30rpx;
		line-height: 70rpx;
	}
	.next-btn {
		width: 280rpx;
		background-color: #fe5745;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 30rpx;
		line-height: 70rpx;
	}
	button:after {
		border: none;
	}
}
</style>
